<template>
  <div>
    <el-table :data="userList" style="width: 100%" stripe border>
      <el-table-column prop="username" label="名字" align="center">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" align="center">
      </el-table-column>
      <el-table-column prop="mobile" label="电话" align="center">
      </el-table-column>
      <el-table-column prop="role_name" label="管理员" align="center">
      </el-table-column>
      <el-table-column prop="mg_state" label="状态" align="center">
        <template v-slot:default="scope">
          <el-switch
            v-model="scope.row.mg_state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeState(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <!-- 管理用户 -->
      <el-table-column prop="" label="操作" align="center">
        <template v-slot:default="scope">
          <el-tooltip effect="dark" content="编辑用户" placement="top-start">
            <el-button
              icon="el-icon-edit"
              @click="alterUser(scope.row.id)"
            ></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除用户" placement="top-start">
            <el-button
              icon="el-icon-delete"
              @click="confirmDelete(scope.row.id)"
            ></el-button>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="分配用户权限"
            placement="top-start"
          >
            <el-button
              icon="el-icon-setting"
              @click="assginPr(scope.row)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页管理 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="userPage.page"
      :page-sizes="[1, 3, 5, 10]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="UpdateTotal"
    >
    </el-pagination>
    <!-- 修改用户信息弹窗 -->
    <el-dialog
      title="修改用户信息"
      :visible.sync="$store.state.editDialog"
      width="50%"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名字" prop="username">
          <el-input
            v-model="ruleForm.username"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="comfirmForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="分配用户权限" :visible.sync="agPr" width="50%">
      <div>
        <p>当前用户：{{ agPrList.username }}</p>
        <p>当前角色：{{ agPrList.role_name }}</p>
        <span>分配新角色</span>
        <el-select  v-model="value" placeholder="请选择">
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.roleDesc"
            :value="item.roleDesc"
          >
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="agPr = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/* 网络请求 */
import { getState, editUser, putUser, deleteUser } from "@/api/user";
import { getRoles } from "@/api/power"
export default {
  data() {
    /* 邮箱正则验证 */
    var checkEmail = (rule, value, callback) => {
      var regEmail = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
      if (regEmail.test(value)) {
        return callback();
      }
      /* 如果验证不通过 */
      callback(new Error("请输入合法邮箱"));
    };
    /* 手机号正则验证 */
    var checkPhone = (rule, value, callback) => {
      var regPhone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (regPhone.test(value)) {
        return callback();
      }
      /* 如果手机号验证不通过 */
      callback(new Error("请输入正确的手机号码"));
    };
    return {
      reqData: {
        query: "",
        pagenum: 1,
        pagesize: 1,
      },
      userPage: {
        pagenum: "",
        total: 1,
      },
      dialogVisible: false,
      ruleForm: {
        username: "",
        email: "",
        mobile: "",
        id: "",
      },
      rules: {
        username: [
          { message: "请输入用户名字", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        mobile: [{ validator: checkPhone, trigger: "blur" }],
        email: [{ validator: checkEmail, trigger: "blur" }],
      },
      agPr: false, //分配权限窗口
      agPrList: {},
      roleList:[]
    };
  },
  mounted() {
    this.$store.dispatch("getUser", this.reqData);
  },
  computed: {
    userList() {
      return this.$store.state.userList;
    },
    UpdateTotal() {
      return (this.total = this.$store.state.total);
    },
  },
  methods: {
    /* 编辑用户弹窗 */
    async alterUser(id) {
      this.$store.state.editDialog = !this.$store.state.editDialog;
      const { data: res } = await editUser(id);
      this.ruleForm.id = res.data.id;
      if (res.data.username) {
        this.ruleForm.username = res.data.username;
      }
      if (res.data.email) {
        this.ruleForm.email = res.data.email;
      }
      if (res.data.mobile) {
        this.ruleForm.mobile = res.data.mobile;
      }
      console.log(res);
    },
    handleSizeChange(val) {
      this.reqData.pagesize = val;
      this.$store.dispatch("getUser", this.reqData);
    },
    handleCurrentChange(val) {
      this.reqData.pagenum = val;
      this.$store.dispatch("getUser", this.reqData);
    },
    /* 网络请求 */
    /* 请求更改状态 */
    async changeState(data) {
      const { data: res } = await getState(data.id, data.mg_state);
      if (res.meta.status != 200) {
        data.mg_state = !data.mg_state;
        return this.$message.error("修改状态失败！");
      }
      this.$message({
        type: "success",
        message: "修改用户状态成功",
        duration: 2000,
      });
    },
    /* 重置修改用户表单 */
    resetForm() {
      this.$refs.ruleForm.resetFields();
      this.$store.state.editDialog = !this.$store.state.editDialog;
    },
    /* 提交修改用户订单 */
    async comfirmForm() {
      const { data: res } = await putUser(this.ruleForm.id, this.ruleForm);
      // console.log(res);
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
        return;
      }
      /* 提示修改成功 */
      this.$message({
        type: "success",
        message: res.meta.msg,
        duration: 2000,
      });
      /* 重新请求数据 */
      this.$store.dispatch("getUser", this.reqData);
      /* 关闭编辑界面 */
      this.$store.state.editDialog = !this.$store.state.editDialog;
    },
    /* 删除功能 */
    confirmDelete(id) {
      const DeId = id;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteUser(DeId).then((res) => {
            this.$message({
              type: "success",
              message: res.data.meta.msg,
              duration: 2000,
            });
            this.$store.dispatch("getUser", this.reqData);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: res.data.meta.msg,
            duration: 2000,
          });
        });
    },
    /* 分配权限功能 */
    async assginPr(row) {
      this.agPr = !this.agPr;
      this.agPrList = row;
      const {data:res} = await getRoles()
      console.log(res);
      this.roleList = res.data
    },
  },
};
</script>

<style lang="scss" scoped>
</style>